<template>
	<view :class="'video-box ' + (isMine ? 'my-video' : '')" @click="playerHander">
		<image class="imgs1" :src="message.payload.thumbUrl" mode="aspectFill"></image>
		<image class="video-icon" :src="videoIcon"></image>
	</view>
</template>

<script>
import videoIcon from '@/static/timstatic/images/play.png';
export default {
	data() {
		return {
			isPlay: false,
			videoIcon: videoIcon
		};
	},

	components: {},
	props: {
		message: {
			type: Object,
			default: () => {}
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		message: {
			handler: function (newVal) {
				console.log(this.message, '11111111111111');
				this.setData({
					message: newVal
				});
			},
			immediate: true,
			deep: true
		}
	},
	onLoad() {},
	methods: {
		playerHander() {
			uni.$emit('videoPlayerHandler', {
				isPlay: true,
				message: this.message
			});
		},
		stopHander() {
			this.isPlay = false;
		}
	}
};
</script>
<style lang="scss">
.video-box {
	width: 160px;
	height: 120px;
	// background-color: rgba(0, 0, 0, 0.2);
	border-radius: 2px 10px 10px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	.imgs1 {
		width: 160px;
		height: 120px;
		position: absolute;
		border-radius: 2px 10px 10px 10px;
		top: 0;
	}
	.video-icon {
		position: absolute;
		top: 44px;
		display: block;
		width: 32px;
		height: 32px;
	}
}

.my-video {
	border-radius: 10px 2px 10px 10px;
	.imgs1 {
		border-radius: 10px 2px 10px 10px;
	}
}

.icon {
	position: absolute;
	bottom: 30px;
	right: 30px;
}
</style>
